<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Network Platform</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Social Network Platform</h1>
      <nav>
        <ul>
          <li><a href="#" id="login-link">Login</a></li>
          <li><a href="#" id="register-link">Register</a></li>
          <li><a href="#" id="logout-link" style="display: none;">Logout</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div id="login-form" style="display: none;">
        <h2>Login</h2>
        <form id="login">
          <div class="form-group">
            <label for="login-email">Email</label>
            <input type="email" id="login-email" required>
          </div>
          <div class="form-group">
            <label for="login-password">Password</label>
            <input type="password" id="login-password" required>
          </div>
          <button type="submit">Login</button>
        </form>
      </div>
      <div id="register-form" style="display: none;">
        <h2>Register</h2>
        <form id="register">
          <div class="form-group">
            <label for="register-email">Email</label>
            <input type="email" id="register-email" required>
          </div>
          <div class="form-group">
            <label for="register-password">Password</label>
            <input type="password" id="register-password" required>
          </div>
          <div class="form-group">
            <label for="register-name">Name</label>
            <input type="text" id="register-name" required>
          </div>
          <button type="submit">Register</button>
        </form>
      </div>
      <div id="app" style="display: none;">
        <section id="profile">
          <h2>Profile</h2>
          <div id="profile-info"></div>
        </section>
        <section id="posts">
          <h2>Posts</h2>
          <form id="new-post">
            <div class="form-group">
              <textarea id="post-content" placeholder="What's on your mind?" required></textarea>
            </div>
            <div class="form-group">
              <input type="file" id="post-media" multiple>
            </div>
            <button type="submit">Post</button>
          </form>
          <div id="posts-list"></div>
        </section>
        <section id="friends">
          <h2>Friends</h2>
          <div id="friends-list"></div>
          <div id="friend-requests"></div>
        </section>
        <section id="messages">
          <h2>Messages</h2>
          <div id="messages-list"></div>
        </section>
      </div>
    </main>
    <footer>
      <p>&copy; 2025 Social Network Platform</p>
    </footer>
  </div>
  <script src="scripts/auth.js"></script>
  <script src="scripts/posts.js"></script>
  <script src="scripts/friends.js"></script>
  <script src="scripts/app.js"></script>
</body>
</html>